<template>
  <div class="make-offers">
    <a-spin :spinning="loading">
      <!-- 基础运价 -->
      <baseRate :form-state="formState" :visible="visible" @edit="editRateHandle"></baseRate>
      <!-- 客户等级 -->
      <div class="customer-level">
        <div class="title">
          <span>客户等级</span>
          <a-button @click="addCustomerLevelHandle">新增</a-button>
        </div>
        <vxe-table border show-overflow="title" height="220" :row-config="{ isHover: true }" :data="formState.customerLevelList" :scroll-y="{ enabled: true }">
          <vxe-column field="customerLevelId" title="客户等级" min-width="180">
            <template #default="{ row }">
              <a-select v-model:value="row.customerLevelId" placeholder="客户等级">
                <a-select-option v-for="(item, index) in customerLevelOpts" :key="index" :value="item.id">{{ item.customerLevel }}</a-select-option>
              </a-select>
            </template>
          </vxe-column>
          <vxe-column field="adjustmentValue" title="调整值" min-width="180">
            <template #default="{ row }">
              <a-input-number v-model:value="row.adjustmentValue" :max="99999.99" :precision="2" placeholder="调整值"></a-input-number>
            </template>
          </vxe-column>
          <vxe-column field="unit" title="单位" min-width="140">
            <template #default="{ row }">
              <a-select v-model:value="row.unit" placeholder="单位" @change="changeUnitHandle(row)">
                <a-select-option v-for="(item, index) in dataDict['UNIT']" :key="index" :value="item.code">{{ item.name }}</a-select-option>
              </a-select>
            </template>
          </vxe-column>
          <vxe-column field="action" title="操作" fixed="right" min-width="120">
            <template #default="{ rowIndex }">
              <a-button type="link" danger @click="deleteCustomerLevelHandle(rowIndex)">删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- 客户调价 -->
      <div class="customer-adjustment">
        <div class="title">
          <span>客户调价</span>
          <a-button @click="addCustomerAdjustmentHandle">新建规则</a-button>
        </div>
        <vxe-table border show-overflow="title" height="220" :row-config="{ isHover: true }" :data="formState.customerAdjustmentList" :scroll-y="{ enabled: true }">
          <vxe-column field="customerList" title="客户名称" min-width="180">
            <template #default="{ row }">
              <span v-for="(item, index) in row.customerList" :title="item.customerShortName" :key="index">{{ item.customerShortName }}{{ index !== row.customerList.length - 1 ? "," : "" }}</span>
            </template>
          </vxe-column>
          <vxe-column field="price" title="调整值" min-width="90"> </vxe-column>
          <vxe-column field="unit" title="单位" min-width="140">
            <template #default="{ row }">
              {{ getLabelByDict("UNIT", row.unit) }}
            </template>
          </vxe-column>
          <vxe-column field="conditionDesc" title="条件" min-width="160">
            <template #default="{ row }">
              {{ getLabelByDict("QUOTATION_ADJUSTMENT_TYPE", row.adjustmentType) }}
              <span v-if="row.conditionDesc === 'BT'">{{ getLabelByDict("QUOTATION_CONDITION", row.conditionDesc) }} {{ row.minValue }}到{{ row.maxValue }}</span>
              <span v-else>{{ getLabelByDict("QUOTATION_CONDITION", row.conditionDesc) }} {{ row.value }}</span>
            </template>
          </vxe-column>
          <vxe-column field="action" title="操作" fixed="right" min-width="120">
            <template #default="{ row, rowIndex }">
              <a-button type="link" @click="editCustomerAdjustmentHandle(row)">编辑</a-button>
              <a-button type="link" danger @click="deleteCustomerAdjustmentHandle(rowIndex)">删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <!-- 附加费 -->
      <div class="additional-charge">
        <div class="title">
          <span>附加费</span>
          <a-button @click="addChargeHandle">新建规则</a-button>
        </div>
        <vxe-table border show-overflow="title" height="220" :row-config="{ isHover: true }" :data="formState.additionalChargesList" :scroll-y="{ enabled: true }">
          <vxe-column field="name" title="费用名称" min-width="160"></vxe-column>
          <vxe-column field="type" title="费用类型" min-width="90">
            <template #default="{ row }">
              {{ getLabelByDict("QUOTATION_FEE_TYPE", row.type) }}
            </template>
          </vxe-column>
          <vxe-column field="price" title="价格" min-width="90"> </vxe-column>
          <vxe-column field="unit" title="单位" min-width="140">
            <template #default="{ row }">
              {{ getLabelByDict("UNIT", row.unit) }}
            </template>
          </vxe-column>
          <vxe-column field="conditionDesc" title="条件" min-width="160"></vxe-column>
          <vxe-column field="action" title="操作" fixed="right" min-width="120">
            <template #default="{ row, rowIndex }">
              <a-button type="link" @click="editChargeHandle(row)">编辑</a-button>
              <a-button type="link" danger @click="deleteChargeHandle(rowIndex)">删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>

      <!-- 历史报价 -->
      <div class="history-charge">
        <div class="title">
          <span>历史报价</span>
        </div>
        <vxe-table border show-overflow="title" height="220" :row-config="{ isHover: true }" :data="formState.bizQuotationHistoryListRes" :scroll-y="{ enabled: true }">
          <vxe-column field="beginTime" title="报价使用日期" min-width="160">
            <template #default="{ row }"> {{ dayjs(Number(row.beginTime)).format("YYYY-MM-DD HH:mm:ss") }} 至 {{ dayjs(Number(row.endTime)).format("YYYY-MM-DD HH:mm:ss") }} </template>
          </vxe-column>
          <vxe-column field="updateName" title="更新人" min-width="90"></vxe-column>
          <vxe-column field="updateTime" title="更新日期" min-width="160">
            <template #default="{ row }">
              {{ dayjs(Number(row.updateTime)).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </vxe-column>
          <vxe-column field="action" title="操作" fixed="right" min-width="120">
            <template #default="{ row }">
              <a-button type="link" @click="historyHandle(row)">查看报价</a-button>
              <!-- <a-button type="link" @click="editChargeHandle(row)">编辑</a-button>
              <a-button type="link" danger @click="deleteChargeHandle(rowIndex)">删除</a-button> -->
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </a-spin>
    <div class="operation-wrapper">
      <a-button type="primary" @click="submitHandle">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
    <!-- 抽屉 -->
    <a-drawer
      v-model:visible="drawerOpts.visible"
      :title="drawerOpts.title"
      :maskClosable="['ShowHistory'].includes(drawerOpts.component)"
      :closable="['ShowHistory'].includes(drawerOpts.component)"
      :width="drawerOpts.width"
      placement="right"
    >
      <component
        v-model:visible="drawerOpts.visible"
        :is="drawerOpts.component"
        :type="drawerOpts.type"
        :pass-data="drawerOpts.passData"
        @submit="drawerOpts.visible = false"
        @historySubmit="init"
        @editBaseSubmit="editBaseSubmitHandle"
      ></component>
    </a-drawer>
    <!-- 弹窗 -->
    <a-modal v-model:visible="dialogOpts.visible" :maskClosable="false" :keyboard="false" :closable="false" :footer="null" :title="dialogOpts.title" :width="dialogOpts.width">
      <component v-model:visible="dialogOpts.visible" :is="dialogOpts.component" :type="dialogOpts.type" :pass-data="dialogOpts.passData" @submit="dialogSubmitHandle"></component>
    </a-modal>
  </div>
</template>
<script lang="ts">
import EditBaseRate from "./components/editBaseRate/index.vue";
import AddCustomerAdjust from "./components/addCustomerAdjust/index.vue";
import AddCharge from "./components/addCharge/index.vue";
import ShowHistory from "./components/showHistory/index.vue";
import { getQuotationInfoApi } from "@/api/configCenter/warehouseEntryChannel";
import dayjs from "dayjs";
export default {
  components: {
    EditBaseRate,
    AddCustomerAdjust,
    AddCharge,
    ShowHistory
  }
};
</script>
<script lang="ts" setup>
import CommonHook from "@/hook/commonHook";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import baseRate from "./baseRate.vue";
import { provide, toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: WarehouseEntryChannel.ListRows;
    type: number;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();
const { visible, passData } = toRefs(props);
const { dataDict, getLabelByDict } = CommonHook();
const { loading, formState, drawerOpts, getCountryByChannel, countryOpts, dialogOpts, customerLevelOpts, getCustomerLevelOpts, getEditBaseRateTime } = InitHook();
const {
  editRateHandle,
  addCustomerLevelHandle,
  deleteCustomerLevelHandle,
  changeUnitHandle,
  addCustomerAdjustmentHandle,
  editCustomerAdjustmentHandle,
  deleteCustomerAdjustmentHandle,
  dialogSubmitHandle,
  addChargeHandle,
  editChargeHandle,
  deleteChargeHandle,
  cancelHandle,
  submitHandle,
  resetFields,
  historyHandle,
  editBaseSubmitHandle
} = OperationHook({ drawerOpts, formState, dialogOpts, emit, passData, loading, getEditBaseRateTime });
provide("countryOpts", countryOpts);
const init = () => {
  loading.value = true;
  getQuotationInfoApi({ id: passData.value.id })
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        const { additionalChargesList, customerAdjustmentList, customerLevelList, itemList, timeRuleList, weightSegmentList, bizQuotationHistoryListRes } = data;
        Object.assign(formState, {
          additionalChargesList,
          customerAdjustmentList,
          customerLevelList,
          weightSegmentList,
          bizQuotationHistoryListRes,
          beginTime: dayjs(Number(timeRuleList[0].beginTime)),
          // beginTime: dayjs(),
          itemList: itemList.map((t: any) => {
            t.countryList = t.countryList.map((r: any) => {
              return r.countryId;
            });
            return t;
          })
        });
      }
    })
    .finally(() => (loading.value = false));
  getCountryByChannel(passData.value.id);
  getCustomerLevelOpts();
};
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      resetFields();
      getEditBaseRateTime.value = false;
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.make-offers{
    // position: relative;
    .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
        padding: 12px 0;
    }
    .customer-level{
        :deep(.ant-select),:deep(.ant-input-number){
            width: 100%
        }
    }
    .additional-charge{
      margin-bottom: 60px;
    }

    .history-charge{
      margin-bottom: 60px;
    }
    .operation-wrapper{
      position: absolute;
      background-color: #fff;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 12px 0;
      text-align: center;
      box-shadow: 1px 1px 5px #ccc;
      z-index: 99;
      :deep(.ant-btn-primary){
        margin-right: 12px;
      }
    }
}
</style>
